<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./three.min.js"></script>
  <script src="./browser.min.js"></script>
  <script src="./photo-sphere-viewer.min.js"></script>
  <script src="./markers.js"></script>
  <link rel="stylesheet" href="./photo-sphere-viewer.min.css">
  <link rel="stylesheet" href="./markers.css">
  <style>
    html,body{width: 100%;height: 100%;margin: 0px;padding: 0px;}
    .ceshicss{
      transform: rotateY(130deg);
    }
    #show{
      width: 300px;
      height: 300px;
      position: fixed;
      z-index: 100;
      top: 50%;
      left: 50%;
      margin-top: -150px;
      margin-left: -150px;
      background: #ffffff;
      display: none;
    }
    #close{
      width: 100%;
      text-align: right;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <div id="show">
    <div id="close" onclick="closeFUN()">关闭</div>
    这里是弹出的DIV内容框！
  </div>
  <div id="viewer" style="width: 100vw; height: 100vh;"></div>
</body>
<script>
  var viewer = new PhotoSphereViewer.Viewer({
    plugins: [
      [PhotoSphereViewer.MarkersPlugin, {
        markers: [
          {
            id: 'alertCon',
            width:50,
            height:50,
            longitude: '50deg',
            latitude: '-30deg',
            image: './pin-red.png',
            orientation:'horizontal',
            className:'ceshicss',
            //clickEventOnMarker:true
          },
          {
            id: 'divshow',
            width:50,
            height:50,
            longitude: '45deg',
            latitude: '0deg',
            image: './pin-blue.png',
          },
        ],
      }],
    ],
    container: document.querySelector('#viewer'),
    panorama: './he.jpg',
    caption:"666",
    navbar:[
    {
      id: 'my-button',
      content: '弹出你好世界',
      title: '你好世界',
      className: 'custom-button',
      onClick: () => {
        alert('你好世界');
      },
    },{
      id: 'my-button2',
      content: '弹出你好世界2',
      title: '你好世界2',
      className: 'custom-button',
      onClick: () => {
        alert('你好世界2');
      },
    }
    ]
  });
  const markersPlugin = viewer.getPlugin(PhotoSphereViewer.MarkersPlugin);
  markersPlugin.on('select-marker', (e, marker) => {
    eventFun[marker.id]()
  // markersPlugin.updateMarker({
  //   id: marker.id,
  //   image: './pin-blue.png'
  // });

  //console.log(e,marker);
});
function closeFUN(){
  document.querySelector('#show').style.display="none"
}
let eventFun={
  alertCon:()=>{
    alert("标记点测试");
  },
  divshow:()=>{
    document.querySelector('#show').style.display="block"
  }
}


</script>
</html>